<script setup>
import {useApi} from "../../composables/useApi"
import showTost from '@/components/toast/index.js'
import * as XLSX from "xlsx";
import {useAppStore} from "../../store/app"
import moment from "moment";

const appStore = useAppStore()

import {reactive, ref} from "vue"
import communityRightDrawear from "@/pages/platform/components/communityRightDrawear.vue";
import {router} from "@/plugins/1.router/index.js";
//基本数据list
let list = ref([])
let page = ref(1)
let limit = ref(20)
let total = ref(0)//总数
const selected = ref([])
let queryFrom = ref({page: 1, limit: 20, title: '', name: ''})

const headers = [

  {
    title: "模板名称",
    key: "title",
    align: 'start',
  },
  {
    title: "得分内容",
    key: "content",
    align: 'start',
  },
  {
    title: "使用对象",
    key: "obs",
    align: 'start',
  },
  {
    title: "德",
    key: "de",
    align: 'start',
  },
  {
    title: "智",
    key: "zhi",
    align: 'start',
  },
  {
    title: "体",
    key: "ti",
    align: 'start',
  },
  {
    title: "美",
    key: "mei",
    align: 'start',
  },
  {
    title: "劳",
    key: "lao",
    align: 'start',
  },
  {
    title: "创建时间",
    key: "create_time",
    align: 'start',
  },
  {
    title: "操作",
    align: 'end',
    key: "options",
    sortable: false,
  },
]

const getList = async () => {
  const {data} = await useApi('/admin/Api.Template/index').post(queryFrom.value)
  console.log(data)
  total.value = data.value.data.total
  list.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.template_id
    }
  })
}

const dialogFlag = ref(false)
// 头部表单回调
const onChange = val => {
  let data = JSON.parse(JSON.stringify(val))
  queryFrom.value = {...queryFrom.value, ...data}
  getList()
}
const isConfirmDialogVisible = ref(false)
// 删除确认弹窗
const onHandleDelete = async (val) => {
  console.log(val)
  let ids = val.data.map(item => item.template_id).toString()
  console.log(ids)
  const {data} = await useApi('/admin/Api.Template/delete').post({template_id: ids})
  console.log(data.value)
  if (data.value.status == 200) {
    showTost("删除成功", {duration: 3000, type: "success"})
    queryFrom.value.page = 1
    isConfirmDialogVisible.value = false
    if (val.type == 'detail') {
      dialogFlag.value = false
    }
    getList()
  }
}
const selectedItems = ref([]);

// 确认弹窗文本
const confirmMsg = ref('')

// 打开删除弹窗
const onHandleDialog = (type) => {
  if (type == 'delete') {
    console.log(selectedItems)
    if (selectedItems.value.length == 0) return
    let data = list.value.filter(item => selectedItems.value.find(val => val == item.id))
    console.log(data)
    currentOptionData.value = {
      data: data,
      type: 'list'
    }
    confirmMsg.value = `确认删除${data.map(item => item.title).toString()}的信息吗`
    isConfirmDialogVisible.value = true
  } else {
    addDialogFlag.value = true
  }
}
// 详情数据
const detailData = ref({})
const viewDetail = async (item) => {
  const {data} = await useApi('/admin/Api.Template/detail').post({template_id: item.template_id})
  console.log(data)
  detailData.value = data.value.data
  dialogFlag.value = true
}
// 添加教师弹窗falg
const addDialogFlag = ref(false)
const refVForm = ref()

// 下载模板
const downLoadTemplate = async () => {
  const {data} = await useApi('/admin/Base/downFile').post({type: 1})
  console.log(data.value)
  if (data.value.status == 200) {
    const link = document.createElement('a');
    link.href = data.value.data.fileUrl;
    link.download = data.value.data.fileName;
    link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
    link.click();

  }
}
// 新增取消回调
const resetForm = () => {
  refVForm.value?.reset()

  addDialogFlag.value = false
}


const valid = ref(false)
const form = reactive({
  title: '',
  content: null,
  obs: 1,
  grade_id: null,
  class_id: null,
  active_id: null,
  mass_id: null,
  room_id: null,
  de: null,
  zhi: null,
  ti: null,
  mei: null,
  lao: null,
  contents: null,
  standard: null,
})
const confirmAddTeacher = async (args) => {
  console.log(valid.value)

  if (!valid.value) return
  const {data} = await useApi('/admin/Api.Template/add').post(form)
  if (data.value.status == 200) {
    refVForm.value?.reset()

    addDialogFlag.value = false
    showTost("新增成功", {duration: 3000, type: "success"})
    queryFrom.value.page = 1
    getList()
  } else {
    console.log(data.value.msg)
    // showTost("新增成功", {duration: 3000, type: "success"})

    showTost(data.value.msg, {duration: 3000, type: "error"})
  }
}
let sexList = ref(['男', '女'])
const onHandleEdit = () => {
  queryFrom.value.page = 1
  getList()
}
getList()
const required = (value, name) => !!value || `${name}为必填字段`;
const importExcelRef = ref(null)
const httpRequest = (e) => {
  let file = e.file // 文件信息
  if (!file) {
    return false
  } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
    // 格式根据自己需求定义
    this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
    return false
  }
  const fileReader = new FileReader()
  fileReader.onload = (ev) => {
    try {
      const data = ev.target.result
      const workbook = XLSX.read(data, {
        // 以字符编码的方式解析
        type: 'binary',
        cellDates: true,

      })
      // 取第一张表
      console.log(workbook)
      const exlname = workbook.SheetNames[0]
      const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
      console.log(exl)
      partPost(exl)
      // 将 JSON 数据挂到 data 里
      let arr = []
      exl.forEach(item => {
        arr.push(item.name)
      })
      console.log(arr)
    } catch (e) {
      console.log('error')
      return false
    }
  }
  fileReader.readAsBinaryString(file)
}
const import_page = ref(1)
const import_limit = ref(10)
const import_percent = ref(0)
const loading = ref(false)

const partPost = async (tableData) => {
  let perdata = []
  for (let i = (import_page.value - 1) * import_limit.value; i < import_page.value * import_limit.value; i++) {
    if (tableData[i]) {
      perdata.push(tableData[i])
    }
  }
  let total_page = Math.ceil(tableData.length / import_limit.value)
  import_percent.value = Math.ceil(import_page.value * 100 / total_page)
  loading.value = true
  console.log(perdata)
  perdata = perdata.map(item => {
    return {
      ...item,
      '出生日期': convertExcelDateFormat(item, '出生日期'),
      '入职日期': convertExcelDateFormat(item, '入职日期'),
    }
  })
  console.log(perdata)
  const {data} = await useApi('/admin/Api.Teacher/upload').post({list: perdata})
  if (data.value.status == 200) {
    if (import_page.value <= total_page - 1) {
      import_page.value = import_page.value + 1
      partPost(data)
    } else {
      // this.dialog.importDialogstatus = false;
      showTost("导入完成", {duration: 3000, type: "success"})
      addDialogFlag.value = false
      queryFrom.value.page = 1
      getList()
      loading.value = false
    }
  }
  // importData(perdata).then(res => {
  //   if(res.status == 200){
  //     if(this.import_page <= total_page-1){
  //       this.import_page = this.import_page +1
  //       this.partPost(data)
  //     }else{
  //       this.dialog.importDialogstatus = false;
  //       this.$message({message: '导入完成', type: 'success'})
  //       this.index()
  //       this.loading = false
  //     }
  //   }
  // })
}

const onChangePage = (val) => {
  queryFrom.value.page = val.page
  queryFrom.value.limit = val.limit
  getList()
}
const convertExcelDateFormat = (row, columnName) => {
  //日期转换
  var date = row[columnName]
  if (date === undefined || date === null || date === "") {
    return null;
  }
  console.log(date)
  //非时间格式问题  返回Invalid date
  let retFormat = moment(date).format('YYYY-MM-DD');
  if (retFormat === "Invalid date") {
    return retFormat;
  }
  return moment(date).add(1, 'days').format('YYYY-MM-DD')
}
const currentOptionData = ref({})
const drawaerDelete = async (val) => {
  console.log(val)
  currentOptionData.value = {
    data: [val],
    type: 'detail'
  }
  confirmMsg.value = `确认删除${val.title}的信息吗`
  isConfirmDialogVisible.value = true
}
// 获取教师列表开始
const teacherList = ref([])
const getTeacherList = async () => {
  const {data} = await useApi('/admin/Api.Teacher/indexList').post({})
  if (data.value.status == 200) {
    teacherList.value = data.value.data
  }
}
getTeacherList()
// 获取教师列表结束

// 获取年级列表开始
const gradeList = ref([])
const getGradeList = async () => {
  const {data} = await useApi('/teacher/Api.Grade/indexList').post({})
  if (data.value.status == 200) {
    console.log(data.value.data)
    gradeList.value = data.value.data
  }
}
getGradeList()
// 获取年级列表结束

const goRecord = () => {
  router.push('/platform/communitySecondList?type=1')
  // router.push( '/platform/times-manage?type=1')

//    todo 去记录页
}
const projectList = ref(['德', '智', '体', '美', '劳'])

const getTypeList = ref(['分值', '排名', '百分比排名'])

const judgment = ref(['大于', '大于等于', '等于', '小于等于', '小于'])

const obs = ref([
  {
    "title": '班级',
    "value": 1,
  },
  {
    "title": '活动',
    "value": 2,
  },
  {
    "title": '年级',
    "value": 3,
  },
  {
    "title": '社团',
    "value": 4,
  },
  {
    "title": '课堂',
    "value": 5,
  },
  {
    "title": '全体',
    "value": 6,
  },
])

const onlyAllowNumbers = (event) => {
  const key = event.key;
  // 检查按键是否为数字或控制键（如 backspace）
  if (!/^\d$/.test(key) && event.key !== 'Backspace' && event.key !== 'Tab') {
    event.preventDefault();
  }
}
const filterInput = (key) => {
  // 仅保留数字
  form[key] = form[key].replace(/\D/g, '');
}
const showFlag = ref(false)
const changeShowFlag = () => {
  showFlag.value = !showFlag.value
}
/** 获取班级列表开始*/
const classList = ref([])
const getClassList = async (id = '') => {
  console.log(id, 'id')
  console.log(form.grade_id)
  const {data} = await useApi('/admin/Api.GradeClass/indexList').post({grade_id: id})
  if (data.value.status == 200) {
    console.log(data.value.data)
    classList.value = data.value.data.map(item=>{
      return {...item,gradeAndTitle:`${item.grade_title}${item.title}`}
    })
  }
}
getClassList()
/** 获取班级列表结束*/
/** 获取活动列表*/
const activeList = ref([])
const getActiveList = async () => {
  const {data} = await useApi('/admin/Api.Active/index').post({page:1,limit:9999})
  if (data.value.status == 200) {
    activeList.value = data.value.data.data
  }
}
getActiveList()
/** 获取活动列表结束*/
/** 获取社团列表*/
const communityList = ref([])
const getCommunityList = async () => {
  const {data} = await useApi('/admin/Api.Mass/index').post({page:1,limit:9999})
  if (data.value.status == 200) {
    communityList.value = data.value.data.data
  }
}
getCommunityList()
/** 获取活动列表结束*/
/** 获取社团列表*/
const classRoomList = ref([])
const getClassRoomList = async () => {
  const {data} = await useApi('/admin/Api.Room/index').post({page:1,limit:9999})
  if (data.value.status == 200) {
    classRoomList.value = data.value.data.data
  }
}
getClassRoomList()
/** 获取活动列表结束*/

/** 班级切换回调*/
const classChange = (val)=>{
  console.log(val)
  form.grade_id = classList.value.find(item=>item.class_id==val).grade_id
}
const isEdit = ref(false)
const onHandleEditData = async () => {
  if (isEdit.value === true) {
    const {data} = await useApi('/admin/Api.Template/add').post(detailData.value)
    if (data.value.status == 200) {
      // refVForm.value?.reset()
      showTost("修改成功", {duration: 3000, type: "success"})
      queryFrom.value.page=1
      getList()
      dialogFlag.value = false
      isEdit.value = false
    } else {
      console.log(data.value.msg)
      showTost(data.value.msg, {duration: 3000, type: "error"})
    }
  } else {
    isEdit.value = true
  }
}
const closeDarwear = ()=>{
  refVForm.value?.reset()
}
</script>

<template>
  <div class="content">
    <custom-drawear :teacher-list="teacherList" @onHandleDelete="drawaerDelete"  @onHandleEdit="onHandleEdit"
                    :detailData="detailData" @update:isDrawerOpen="dialogFlag=$event" @close="closeDarwear"
                    :is-drawer-open="dialogFlag">
      <VForm
        :disabled="!isEdit"
        ref="refVForm"
        @submit.prevent="confirmAddTeacher"
      >
        <VRow>
          <VCol cols="6">
            <VTextField
              v-model="detailData.title"
              label="课堂名称"
              :rules="[(val)=>required(val,'课堂名称')]"
            >
              <template v-slot:label>
                <span>课堂名称</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextField>
          </VCol>
          <VCol cols="6">
            <VTextField
              v-model="detailData.content"
              label="得分内容"
              :rules="[(val)=>required(val,'得分内容')]"
            >
              <template v-slot:label>
                <span>得分内容</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextField>
          </VCol>
          <VCol cols="6">
            <VAutocomplete
              style="width:100%"
              v-model="detailData.obs"
              :items="obs"
              item-title="title"
              item-value="value"
              :rules="[(val)=>required(val,'使用对象类型选择')]"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>使用对象类型选择</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
          </VCol>
          <VCol cols="6" v-if="detailData.obs !==6 ">
            <VAutocomplete
              v-if="detailData.obs===1"
              @update:modelValue="classChange"
              v-model="detailData.class_id"
              :items="classList"
              item-title="gradeAndTitle"
              item-value="class_id"
              :rules="[(val)=>required(val,'使用对象')]"
            >
              <template v-slot:label>
                <span>使用对象</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
            <VAutocomplete
              v-if="detailData.obs===2"
              v-model="detailData.active_id"
              :items="activeList"
              item-title="title"
              item-value="active_id"
              :rules="[(val)=>required(val,'活动名称')]"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>使用对象</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
            <VAutocomplete
              v-if="detailData.obs===3"
              :items="gradeList"
              v-model="detailData.grade_id"
              item-title="title"
              item-value="grade_id"
              label="年级"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>使用对象</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
            <VAutocomplete
              v-if="detailData.obs===4"
              v-model="detailData.mass_id"
              :items="communityList"
              item-title="title"
              item-value="mass_id"
              :rules="[(val)=>required(val,'社团名称')]"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>社团名称</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
            <VAutocomplete
              v-if="detailData.obs===5"
              v-model="detailData.room_id"
              :items="classRoomList"
              item-title="title"
              item-value="room_id"
              :rules="[(val)=>required(val,'使用对象')]"
            >
              <template v-slot:label>
                <span>使用对象</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
          </VCol>
          <VCol cols="6">
            <VTextField
              v-model="detailData.de"
              :rules="[(val)=>required(val,'德')]"
            >
              <template v-slot:label>
                <span>德</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextField>
          </VCol>
          <VCol cols="6">
            <VTextField
              v-model="detailData.zhi"
              :rules="[(val)=>required(val,'智')]"
            >
              <template v-slot:label>
                <span>智</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextField>
          </VCol>
          <VCol cols="6">
            <VTextField
              v-model="detailData.ti"
              :rules="[(val)=>required(val,'体')]"
            >
              <template v-slot:label>
                <span>体</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextField>
          </VCol>
          <VCol cols="6">
            <VTextField
              v-model="detailData.mei"
              :rules="[(val)=>required(val,'美')]"
            >
              <template v-slot:label>
                <span>美</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextField>
          </VCol>
          <VCol cols="6">
            <VTextField
              v-model="detailData.lao"
              :rules="[(val)=>required(val,'劳')]"
            >
              <template v-slot:label>
                <span>劳</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextField>
          </VCol>
          <VCol cols="12">
            <VTextarea
              type="textarea"
              v-model="detailData.contents"
              label="默认评语"
              :rules="[(val)=>required(val,'默认评语')]"
              placeholder="请输入"
            >
              <template v-slot:label>
                <span>默认评语</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextarea>
          </VCol>
          <VCol cols="12">
            <VTextarea
              type="textarea"
              v-model="detailData.standard"
              label="评分标准"
              :rules="[(val)=>required(val,'评分标准')]"
              placeholder="请输入"
            >
              <template v-slot:label>
                <span>评分标准</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VTextarea>
          </VCol>
        </VRow>
      </VForm>
      <div class="d-flex justify-end" style="height:60px;margin-top: 30px">

        <VBtn
          color="primary"
          class="me-4"
          @click="onHandleEditData"
        >
          {{ isEdit == true ? '保存' : '编辑' }}
        </VBtn>
        <VBtn
          color="error"
          variant="outlined"
          @click="drawaerDelete(detailData)"
        >
          删除
        </VBtn>
      </div>

    </custom-drawear>

    <ConfirmDialog
      v-model:isDialogVisible="isConfirmDialogVisible"
      :handleData="currentOptionData"
      @confirm="onHandleDelete"
      :confirm-msg="confirmMsg"
      :confirmation-question="confirmMsg"
      cancel-msg="Unsubscription Cancelled!!"
    />
    <!-- 头部 -->
    <custom-header title="素质评价模板"
                   button-text="添加模板"
                   @onChange="onChange"
                   @onHandle="onHandleDialog">
<!--      <template v-slot:select>-->
<!--        <IconBtn size="small" style="position: relative">-->
<!--          <i-->
<!--            class="ri-filter-3-line cursor-pointer"-->
<!--            style="block-size: 24px;inline-size: 24px;"-->
<!--            @click="changeShowFlag"-->
<!--          />-->
<!--        </IconBtn>-->
<!--        <div class="menu-box" v-if="showFlag">-->
<!--          <VList style="width: 310px!important;">-->
<!--            <VListItem style="width: 100%">-->
<!--              <template #prepend>-->
<!--                <VSelect-->
<!--                  style="width: 100%"-->
<!--                  :items="sexList"-->
<!--                  v-model="form.sex"-->
<!--                  item-title="title"-->
<!--                  item-value="title"-->
<!--                  label="负责教师"-->
<!--                  class="input-width-height"-->
<!--                />-->
<!--              </template>-->
<!--            </VListItem>-->
<!--            <VListItem>-->
<!--              <template #prepend>-->
<!--                <VSelect-->
<!--                  v-model="form.nation"-->
<!--                  :items="nationArr"-->
<!--                  item-title="title"-->
<!--                  item-value="title"-->
<!--                  label="活动类型"-->
<!--                  class="input-width-height"-->
<!--                />-->
<!--              </template>-->
<!--            </VListItem>-->
<!--            <VListItem style="display: flex;justify-content: end">-->
<!--              <VBtn-->
<!--                color="primary"-->
<!--                class="me-4"-->
<!--                @click="search"-->

<!--              >-->
<!--                搜索-->
<!--              </VBtn>-->
<!--              <VBtn-->
<!--                type="submit"-->
<!--                color="primary"-->
<!--                @click="reset"-->
<!--              >-->
<!--                重置-->
<!--              </VBtn>-->
<!--            </VListItem>-->
<!--          </VList>-->
<!--        </div>-->

<!--      </template>-->
    </custom-header>


    <VDataTable
      v-model="selectedItems"
      :headers="headers"
      :items="list"
      :items-per-page="100"
      item-key="id"
      show-select
      class="text-no-wrap"
    >
      <template #item.obs="{ item }">
        <div class="d-flex align-center ">
          <div>{{ obs[item.obs-1].title }}</div>
        </div>
      </template>
      <template #item.options="{ item }">
        <div class="d-flex align-center options-right-display">
          <div class="d-flex align-center ms-3 cursor-pointer">
            <i @click="viewDetail(item)" class="ri-menu-line"></i>
          </div>
        </div>
      </template>
    </VDataTable>
    <PaginationVue
      @onChange="onChangePage"
      :current-page="queryFrom.page"
      :page-size="queryFrom.limit"
      :total="total"
    />

    <!--    添加对话框-->
    <VDialog
      :persistent="true"
      max-width="600"
      :model-value="addDialogFlag"
    >
      <div class="dialog-body" style="width: 600px;overflow: auto">
        <AppDrawerHeaderSection
          title="添加模板"
          @cancel="addDialogFlag=false"
        />
        <VDivider class="v-divider"/>
        <VCard>
          <PerfectScrollbar
            :options="{ wheelPropagation: false }"
            class="h-60"
            style="overflow:auto"
          >
            <VCardText>

              <VForm
                v-model="valid"
                ref="refVForm"
                @submit.prevent="confirmAddTeacher"
              >
                <VRow>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.title"
                      label="课堂名称"
                      :rules="[(val)=>required(val,'课堂名称')]"
                    >
                      <template v-slot:label>
                        <span>课堂名称</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.content"
                      label="得分内容"
                      :rules="[(val)=>required(val,'得分内容')]"
                    >
                      <template v-slot:label>
                        <span>得分内容</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VAutocomplete
                      style="width:100%"
                      v-model="form.obs"
                      :items="obs"
                      item-title="title"
                      item-value="value"
                      :rules="[(val)=>required(val,'使用对象类型选择')]"
                      class="input-width-height"
                    >
                      <template v-slot:label>
                        <span>使用对象类型选择</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VAutocomplete>
                  </VCol>
                  <VCol cols="6" v-if="form.obs !==6 ">
                    <VAutocomplete
                      v-if="form.obs===1"
                      @update:modelValue="classChange"
                      v-model="form.class_id"
                      :items="classList"
                      item-title="gradeAndTitle"
                      item-value="class_id"
                      :rules="[(val)=>required(val,'使用对象')]"
                    >
                      <template v-slot:label>
                        <span>使用对象</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VAutocomplete>
                    <VAutocomplete
                      v-if="form.obs===2"
                      v-model="form.active_id"
                      :items="activeList"
                      item-title="title"
                      item-value="active_id"
                      :rules="[(val)=>required(val,'活动名称')]"
                      class="input-width-height"
                    >
                      <template v-slot:label>
                        <span>使用对象</span>
                        <span  style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VAutocomplete>
                    <VAutocomplete
                      v-if="form.obs===3"
                      :items="gradeList"
                      v-model="form.grade_id"
                      item-title="title"
                      item-value="grade_id"
                      label="年级"
                      class="input-width-height"
                    >
                      <template v-slot:label>
                        <span>使用对象</span>
                        <span  style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VAutocomplete>
                    <VAutocomplete
                      v-if="form.obs===4"
                      v-model="form.mass_id"
                      :items="communityList"
                      item-title="title"
                      item-value="mass_id"
                      :rules="[(val)=>required(val,'社团名称')]"
                      class="input-width-height"
                    >
                      <template v-slot:label>
                        <span>社团名称</span>
                        <span  style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VAutocomplete>
                    <VAutocomplete
                      v-if="form.obs===5"
                      v-model="form.room_id"
                      :items="classRoomList"
                      item-title="title"
                      item-value="room_id"
                      :rules="[(val)=>required(val,'使用对象')]"
                    >
                      <template v-slot:label>
                        <span>使用对象</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VAutocomplete>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.de"
                      :rules="[(val)=>required(val,'德')]"
                    >
                      <template v-slot:label>
                        <span>德</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.zhi"
                      :rules="[(val)=>required(val,'智')]"
                    >
                      <template v-slot:label>
                        <span>智</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.ti"
                      :rules="[(val)=>required(val,'体')]"
                    >
                      <template v-slot:label>
                        <span>体</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.mei"
                      :rules="[(val)=>required(val,'美')]"
                    >
                      <template v-slot:label>
                        <span>美</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.lao"
                      :rules="[(val)=>required(val,'劳')]"
                    >
                      <template v-slot:label>
                        <span>劳</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="12">
                    <VTextarea
                      type="textarea"
                      v-model="form.contents"
                      label="默认评语"
                      :rules="[(val)=>required(val,'默认评语')]"
                      placeholder="请输入"
                    >
                      <template v-slot:label>
                        <span>默认评语</span>
                        <span  style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextarea>
                  </VCol>
                  <VCol cols="12">
                    <VTextarea
                      type="textarea"
                      v-model="form.standard"
                      label="评分标准"
                      :rules="[(val)=>required(val,'评分标准')]"
                      placeholder="请输入"
                    >
                      <template v-slot:label>
                        <span>评分标准</span>
                        <span  style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextarea>
                  </VCol>
                  <VCol cols="12">
                    <div class="d-flex justify-end">
                      <VBtn
                        color="secondary"
                        type="reset"
                        variant="tonal"
                        class="me-4"
                        @click="resetForm"
                      >
                        取消
                      </VBtn>
                      <VBtn
                        type="submit"
                        color="primary"
                        class="me-4"
                      >
                        添加
                      </VBtn>
                    </div>
                  </VCol>
                </VRow>
              </VForm>
            </VCardText>
          </PerfectScrollbar>
        </VCard>

      </div>
    </VDialog>
  </div>

</template>

<style lang="scss" scoped>
.dialog-body {
  background: rgb(var(--v-theme-surface));
}

:deep(.v-list-item__prepend) {
  width: 270px;
}

.community-box {
  width: 80px;
  height: 30px;
  background-color: #16B1FF29;
  border-radius: 50px;
  color: #16B1FF;
  line-height: 30px;
  text-align: center;
}

.examination-session {
  margin-left: 30px;
  cursor: pointer;
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(var(--v-theme-button-grey-color));
  background: rgba(var(--v-theme-button-grey-bg));

}

.cooperation {
  background-color: rgba(255, 180, 0, 0.16);
  color: rgba(255, 180, 0, 1);
}

.menu-box {
  border-radius: 6px;
  position: absolute;
  top: 50px;
  right: 25px;
  width: 310px;
  background-color: #fff;
  z-index: 999;
}
</style>
